<template>
  <div class="supplier_view footer-page">
    <el-form ref="viewForm" :model="viewForm" :rules="rules" class="demo-ruleForm" :class="{ 'edit_form': isEdit }">
      <p class="edit-header">
        <span>店铺信息</span>
      </p>
      <div class="info_list">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>店铺头像:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.photo" />
                <el-form-item v-else prop="photo">
                  <crop-upload show-type="photo" :init-val="viewForm.photo" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('photo', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>店铺名称:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.shopname }}</p>
                <el-form-item v-else prop="shopname">
                  <el-input v-model="viewForm.shopname" clearable :maxlength="30" />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>经营项目:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.category_name }}</p>
                <el-form-item v-else prop="category_name">
                  <el-input disabled v-model="viewForm.category_name" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <!--          <el-col :span="12">
            <div class="flex">
              <label><span
                  v-if="isEdit"
                  class="required-icon"
                >*</span>账户类型:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{viewForm.account==1?'融资账户':'非融资账户'}}</p>
                <el-form-item
                  v-else
                  prop="account"
                >
                  <el-select
                    clearable
                    v-model="viewForm.account"
                    @change="accountTypeChange"
                  >
                    <el-option
                      label="融资账户"
                      :value="1"
                    ></el-option>
                    <el-option
                      label="非融资账户"
                      :value="2"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>是否风控:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.account_type == 1 ? '是' : '否' }}</p>
                <el-form-item v-else prop="account_type">
                  <el-select clearable :disabled="viewForm.account == 1" v-model="viewForm.account_type">
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="2" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>发票类型:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.faptype == 1 ? '普通发票' : viewForm.faptype == 2 ? '增值税发票' : '普通发票+增值税发票' }}</p>
                <el-form-item v-else prop="faptype">
                  <el-select clearable v-model="viewForm.faptype">
                    <el-option label="普通发票" value="1" />
                    <el-option label="增值税发票" value="2" />
                    <el-option label="普通发票+增值税发票" value="1,2" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>当前经营位置:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ shopcity }}</p>
                <el-form-item v-else prop="shopcity">
                  <el-cascader clearable filterable placeholder="请选择当前经营位置" v-model="viewForm.shopcity" :options="regionList" :props="optionProps" separator="-" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>店铺联系人:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.people }}</p>
                <el-form-item v-else prop="people">
                  <el-input v-model="viewForm.people" clearable />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>联系人手机号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.contact_tel }}</p>
                <el-form-item v-else prop="contact_tel">
                  <el-input clearable v-model="viewForm.contact_tel" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div v-if="!isEdit" class="flex align-center">
              <label><span v-if="isEdit" class="required-icon">*</span>审核状态:</label>
              <div class="flex-1">
                <el-tag :type="viewForm.status == 1 ? 'success' : viewForm.status == 2 ? 'warning' : 'danger'">
                  {{ viewForm.status == 1 ? "已审核" : viewForm.status == 2 ? "待审核" : "拒绝" }}
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <p class="edit-header">
        <span>公司信息</span>
      </p>
      <div class="info_list">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>公司名称:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.mechanism }}</p>
                <el-form-item v-else prop="mechanism">
                  <el-input v-model="viewForm.mechanism" clearable :maxlength="10" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>工商注册号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.companyid }}</p>
                <el-form-item v-else prop="companyid">
                  <el-input v-model="viewForm.companyid" clearable />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex area_item">
              <label><span v-if="isEdit" class="required-icon">*</span>公司所在区域:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ companyArea }}</p>
                <el-form-item v-else prop="company_area">
                  <el-cascader clearable filterable placeholder="请选择公司所在区域" v-model="viewForm.company_area" :options="areaList" :props="optionProps" separator="-" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>公司地址:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.company }}</p>
                <el-form-item v-else prop="company">
                  <el-input v-model="viewForm.company" clearable />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>法人姓名:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.faname }}</p>
                <el-form-item v-else prop="faname">
                  <el-input v-model="viewForm.faname" clearable :maxlength="10" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>法人身份证号:</label>
              <div class="flex-1">
                <p v-if="!isEdit">{{ viewForm.idcard }}</p>
                <el-form-item v-else prop="idcard">
                  <el-input v-model="viewForm.idcard" clearable />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>营业执照:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.shopcard"></preview-img>
                <el-form-item v-else prop="shopcard">
                  <crop-upload show-type="photo" :init-val="viewForm.shopcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('shopcard', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>公司门头照:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.doorphoto" />
                <el-form-item v-else prop="doorphoto">
                  <crop-upload show-type="photo" :init-val="viewForm.doorphoto" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('doorphoto', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>公章图片:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.seal_url" />
                <el-form-item v-else prop="seal_url">
                  <crop-upload show-type="photo" :init-val="viewForm.seal_url" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('seal_url', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>身份证正面照:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.faidcard" />
                <el-form-item v-else prop="faidcard">
                  <crop-upload show-type="photo" :init-val="viewForm.faidcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="flex">
              <label><span v-if="isEdit" class="required-icon">*</span>身份证背面照:</label>
              <div class="flex-1">
                <preview-img v-if="!isEdit" :img-url="viewForm.faidcard_back" />
                <el-form-item v-else prop="faidcard_back">
                  <crop-upload show-type="photo" :init-val="viewForm.faidcard_back" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard_back', val)" />
                </el-form-item>
              </div>
            </div>
          </el-col>
          <el-col :span="12" />
        </el-row>
      </div>
      <template v-if="!isEdit">
        <p class="edit-header">
          <span>操作记录</span>
        </p>
        <div class="info_list">
          <el-table :data="tableData">
            <el-table-column prop="operation_content" label="内容" />
            <el-table-column prop="operator" label="操作人" width="180" />
            <el-table-column prop="operation_time" label="操作时间" width="200" />
          </el-table>
        </div>
      </template>
    </el-form>
    <div v-if="$hasMethod('#edit')" class="page-footer-btns">
      <template v-if="!isEdit">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button v-if="viewForm.status == 2" size="small" type="primary" @click="$router.push({ name: 'auditSupplierView', params: { viewId: viewId, toEdit: true } })">修改信息
        </el-button>
      </template>
      <template v-else>
        <el-button size="small" @click="cancelEdit">返回</el-button>
        <el-button size="small" type="primary" @click="submit">保存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import previewImg from '@/components/previewImg'
import { shopUserById, editShopUserById } from '@/api/audit'
import cropUpload from '@/components/cropUpload'
import { checkCompanyId, checkCardId, checkMobile } from '@/utils/validate'
import { getRegion } from '@/api/order'
export default {
  components: { previewImg, cropUpload },
  props: ['viewId', 'toEdit'],
  // props: {
  //   viewId: {
  //     type: String,
  //     default: ''
  //   },
  //   toEdit: {
  //     type: Boolean,
  //     default: ''
  //   }
  // },
  data() {
    let validateTel = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('联系人手机号格式错误'));
      } else {
        callback()
      }
    }
    let validateCompanyId = (rule, value, callback) => {
      if (!checkCompanyId(value)) {
        callback(new Error('工商注册号格式错误'))
      } else {
        callback()
      }
    }
    let validateIdcard = (rule, value, callback) => {
      if (!checkCardId(value)) {
        callback(new Error('法人身份证号格式错误'))
      } else {
        callback()
      }
    }
    return {
      isEdit: false,
      tableData: [],
      viewForm: {},
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'change' }
        ],
        account: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ],
        account_type: [
          { required: true, message: '请选择是否开启风控', trigger: 'change' }
        ],
        faptype: [
          { required: true, message: '请选择发票类型', trigger: 'change' }
        ],
        shopcity: [
          { required: true, message: '当前经营位置不能为空', trigger: 'change' }
        ],
        people: [
          { required: true, message: '店铺联系人不能为空', trigger: 'change' }
        ],
        contact_tel: [
          { required: true, message: '联系人手机号不能为空', trigger: 'change' },
          { validator: validateTel, trigger: 'change' }
        ],
        mechanism: [
          { required: true, message: '公司名称不能为空', trigger: 'change' }
        ],
        companyid: [
          { required: true, message: '工商注册号不能为空', trigger: 'change' },
          { validator: validateCompanyId, trigger: 'change' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ],
        company: [
          { required: true, message: '公司地址不能为空', trigger: 'change' }
        ],
        faname: [
          { required: true, message: '法人姓名不能为空', trigger: 'change' }
        ],
        idcard: [
          { required: true, message: '法人身份证号不能为空', trigger: 'change' },
          { validator: validateIdcard, trigger: 'change' }
        ],
        shopcard: [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ],
        photo: [
          { required: true, message: '请上传店铺头像', trigger: 'change' }
        ],
        doorphoto: [
          { required: true, message: '请上传公司门头照', trigger: 'change' }
        ],
        seal_url: [
          { required: true, message: '请上传公章图片', trigger: 'change' }
        ],
        faidcard: [
          { required: true, message: '请上传身份证正面照', trigger: 'change' }
        ],
        faidcard_back: [
          { required: true, message: '请上传身份证背面照', trigger: 'change' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ]
      },
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      areaList: [],
      shopcity: '',
      companyArea: ''
    }
  },
  methods: {
    getAreaId(arr) {
      for (let p of this.areaList) {
        if (p.name === arr[0]) {
          for (let c of p.sub) {
            if (c.name === arr[1]) {
              return c.id
            }
          }
        }
      }
      return ''
    },
    accountTypeChange(val) {
      if (val === 1) {
        this.viewForm.account_type = 1
      }
    },
    setUrl(key, value) {
      this.viewForm[key] = value
    },
    // 取消更改 
    cancelEdit() {
      if (this.toEdit) {
        this.$router.back()
      } else {
        this.isEdit = false
        this.getData()
      }
    },
    // 保存提交
    submit() {
      this.$refs['viewForm'].validate((valid) => {
        if (valid) {
          let params = {
            photo: '',
            shopname: '',
            account: null,
            account_type: null,
            faptype: '',
            shopcity: '',
            people: '',
            contact_tel: '',
            mechanism: '',
            companyid: '',
            company_area: '',
            company: '',
            faname: '',
            idcard: '',
            shopcard: '',
            doorphoto: '',
            seal_url: '',
            faidcard: '',
            area_id: '',
            faidcard_back: ''
          }
          for (let key in params) {
            params[key] = this.viewForm[key]
          }
          params.id = this.viewId
          params.area_id = this.getAreaId(params.company_area)
          params.company_area = params.company_area.join('-')
          params.shopcity = params.shopcity.join('-')
          editShopUserById(params).then(res => {
            this.$router.push({ name: 'auditSupplierView', params: { viewId: this.viewId }})
            this.getData()
          })
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    getData() {
      shopUserById(this.viewId).then(res => {
        this.viewForm = { ...res.shopInfo, ...res.companyInfo }
        this.tableData = res.operationRecord
        this.shopcity = this.viewForm.shopcity
        const cityArr = this.viewForm.shopcity.split('-')
        this.viewForm.shopcity = cityArr
        this.companyArea = this.viewForm.company_area
        const areaArr = this.viewForm.company_area.split('-')
        this.viewForm.company_area = areaArr
      })
    },
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : [];
        this.areaList = res ? [...res[0].sub] : [];
        const index = this.areaList.findIndex(k => k.id === 7459)
        this.areaList.splice(index, 1)
      })
    }
  },
  mounted() {
    this.isEdit = !!this.toEdit
    this.getData()
    this.getProvice()
  }
}
</script>

<style lang="scss" scoped>
.supplier_view {
  .info_list {
    padding: 20px 0;
  }

  .el-image {
    width: 95px;
    height: 95px;
  }

  .el-row {
    margin-bottom: 20px;
  }

  label {
    width: 200px;
    margin-right: 10px;
  }
}

.item_inline_form {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  margin-bottom: 10px;

  &>span {
    display: inline-block;
    height: 100%;
    background-color: $gray-bg;
    padding: 0 10px;
    border-right: 1px solid #e6e6e6;
  }

  /deep/.el-input__inner {
    border: none;
  }
}

.tip {
  color: #bbbbbb;
  padding-left: 210px;
}

.edit_form label {
  padding-top: 12px;
}

.required-icon {
  margin-right: 2px;
}
</style>
<style lang="scss">
.guarantee_item,
.area_item {
  .el-select .el-input {
    width: 100%;
  }
}

.area_item .el-form-item {
  margin-bottom: 10px;
}
</style>
